﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>行内按钮表格 - Xui Demo</title>
	<!-- demo -->
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../demo_data.js"></script>
	
	<!-- xui -->
	<link rel="stylesheet" type="text/css" href="../../xui.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../xui.js"></script>
	
	<!-- xtable -->
	<script type="text/javascript">
		$(function(){
			var xtable = $("#goods_xtable").xtable({
				width:700,				//宽度默认  100%
				xdata:$xdata,			//静态数据
				//url:"$xdata"			//后台返回数据格式参考 $xdata
				format:function(row){	//行格式化
					//设置操作按钮
					row.btns = "<a class=' btn_update' xval='"+row.index+"'>修改</a>&nbsp;"+
						"<a class=' btn_delete' xval='"+row.name+"'>删除</a>";
				},
				success:function(){
					//绑定修改事件
					$(".btn_update").click(function(){
						//获取绑定的下标
						var index = $(this).attr("xval");
						//获取点击行数据
						var row = xtable.getRow(index);
						$.xalert({msg:"修改："+row.name});
					});
					//绑定删除事件
					$(".btn_delete").click(function(){
						//获取绑定的数据
						var xval = $(this).attr("xval");
						$.xalert({msg:"删除："+xval});
					});
				}
			});
		})
	</script>
</head>
<body>
	<h2>行内按钮表格</h2>
	<div class="xtable" id="goods_xtable">
		<table class="xhead">
			<tr>
				<th>商品</th>
				<th width="100px">商品类型</th>
				<th width="80px">价格 </th>
				<th width="80px">销量</th>
				<th width="80px">操作</th>
			</tr>
		</table>
		<div class="xbody">
			<table>
				<tbody class="xtemplate">
					<tr>
						<td>{name}</td>
						<td>{typeName}</td>
						<td class="tr">{price}</td>
						<td class="tc">{sales}</td>
						<td class="tc">{btns}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</body>
</html>